<template>
  <div class="login-container">
    <div class="label">
      <h1 class="main">TODO LIST</h1>
      <p class="sub">
        Although the road is far, one must arrive when traveling; Take small
        steps to reach a thousand miles!
      </p>
    </div>
    <div class="login-form">
      <div style="width: 350px">
        <t-form
          ref="form"
          :data="formData"
          :colon="true"
          :label-width="0"
          :rules="rules"
          @reset="onReset"
          @submit="onSubmit"
        >
          <t-form-item name="account">
            <t-input
              class="input-common"
              v-model="formData.account"
              clearable
              placeholder="Account"
            >
              <template #prefix-icon>
                <desktop-icon />
              </template>
            </t-input>
          </t-form-item>

          <t-form-item name="password">
            <t-input
              class="input-common"
              v-model="formData.password"
              type="password"
              clearable
              placeholder="Password"
            >
              <template #prefix-icon>
                <lock-on-icon />
              </template>
            </t-input>
          </t-form-item>

          <t-form-item>
            <t-button class="login-button" theme="primary" type="submit" block>
              LOGIN
            </t-button>
          </t-form-item>
        </t-form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import { MessagePlugin } from "tdesign-vue-next";
import { DesktopIcon, LockOnIcon } from "tdesign-icons-vue-next";
import { useUserStore } from "@/store";
import { useRouter } from "vue-router";
import { userLogin } from "@/api/userService";
const userStore = useUserStore();
const router = useRouter();

const formData = reactive({
  account: "admin",
  password: "123456",
});

// 校验规则
const rules = {
  account: [{ required: true, message: "账户名必填", type: "error" }],
  password: [{ required: true, message: "密码必填", type: "error" }],
};

// 充值表单
const onReset = () => {
  MessagePlugin.success("重置成功");
};

// 提交表单
const onSubmit = async ({ validateResult, firstError }) => {
  if (validateResult === true) {
    try {
      await userLogin({
        account: formData.account,
        password: formData.password,
      });
      userStore.handleSetUserInfo({
        account: formData.account,
        password: formData.password,
      });
      MessagePlugin.success("登录成功，即将跳转");
      setTimeout(() => {
        router.push({ name: "home" });
      }, 1000);
    } catch (err) {
      MessagePlugin.error(err.msg || "登录失败");
    }
  } else {
    console.log("Validate Errors: ", firstError, validateResult);
    MessagePlugin.warning(firstError);
  }
};
</script>

<style lang="less" scoped>
.login-container {
  width: 100vw;
  height: 100vh;
  background: url("@/assets//login-bg.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  .label {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;

    .main {
      font-size: 86px;
      color: #fff;
      box-shadow: var(--td-shadow-3);
      background: rgba(97, 141, 255, 0.5);
      border-radius: 12px;
      margin: 12px auto 48px;
      padding: 12px;
    }
    .sub {
      font-size: 36px;
      padding-left: 24px;
      box-sizing: border-box;
      margin: 12px auto;
      padding: 12px;
      background: rgba(97, 141, 255, 0.3);
    }
  }
  .login-form {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.3);
    .input-common {
      height: 56px;
      border-radius: 4px;
      :deep(.t-input--prefix) {
        background: rgba(255, 255, 255, 0.6);
        height: 56px;
        border: none;
      }
    }
    .login-button {
      height: 48px;
      background: rgba(97, 141, 255, 0.9);
      box-shadow: var(--td-shadow-3);
    }
  }
}
</style>